<template>
  <div class="wallet">
    <!-- 引入公共头部 -->
    <div class="van-hairline--bottom van-nav-bar" style="z-index: 1;">
      <div class="van-nav-bar__left">
        <i class="van-icon van-icon-arrow van-nav-bar__arrow" @click="returnPage"></i>
      </div>
      <div class="van-ellipsis van-nav-bar__title">我的钱包</div>
      <div class="van-nav-bar__right">
        <span @click="toRechargeDetail">
          明细
        </span>
      </div>
    </div>

    <div class="wallet-form">
      <div class="wallet-title">充值金额</div>
      <div class="wallet-boder">
        <div class="wallet-icon wallet-balance"></div>
        <input class="wallet-input" type="text" @change="checkBalance" v-model="balance" id="balance" placeholder="输入金额"/>
      </div>
      <div class="wallet-btn" @click="login">立即充值</div>
    </div>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import { Toast } from 'vant'
import walletApi from '../../api/user'
export default {
  name: 'wallet',
  data () {
    return {
      balance: ''
    }
  },
  components: {
    NavBar
  },
  methods: {
    toRechargeDetail: function () {
      this.$router.push('/user/wallet/rechargeDetail')
    },
    returnPage: function () {
      if (this.$route.query.cartSuccess) {
        Toast('正在返回我的订单！')
        this.$router.push('/user/order')
      } else {
        this.$router.push('/user')
      }
    },
    checkBalance: function () {
      if (this.balance === '' || this.balance <= 0) {
        Toast.fail('充值金额必须大于0')
        return false
      }
      if (this.balance > 1000000) {
        Toast.fail('充值金额不能超过100万')
        return false
      }
      let reg = /^([1-9]\d*|0)(\.\d{1,2})?$/
      if (!reg.test(this.balance)) {
        Toast.fail('充值金额有误')
      }
    },
    login: function () {
      if (this.balance === '' || this.balance <= 0) {
        Toast.fail('充值金额必须大于0')
        return false
      }
      if (this.balance > 1000000) {
        Toast.fail('充值金额不能超过100万')
        return false
      }
      let reg = /^([1-9]\d*|0)(\.\d{1,2})?$/
      if (!reg.test(this.balance)) {
        Toast.fail('充值金额有误')
        return false
      }
      let _this = this
      walletApi.chargeBalance(this.balance).then(function (res) {
        if (res.data.success) {
          if (res.data.re > 0) {
            Toast.success('充值成功')
            if (_this.$route.query.cartSuccess) {
              _this.$router.push('/user/order')
            } else {
              _this.$router.push('/user')
            }
          } else {
            Toast.success('充值失败')
          }
        } else {
          Toast.fail(res.data.msg)
        }
      })
    }
  }
}
</script>
<style>
  .wallet {
    position: absolute;
    height: 100%!important;
    background: #fff;
  }
  .wallet-form {
    padding-top: 46px;
  }
  .wallet-title {
    width: 80%;
    height: 30px;
    margin-top: 10px;
    margin-left: 10%;
    line-height: 40px;
  }
  .wallet-boder {
    width: 80%;
    height: 40px;
    margin-top: 10px;
    margin-left: 10%;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #1ABC9C;
  }
  .wallet-icon {
    height: 37px;
    line-height: 37px;
    width: 10%;
    float: left;
    text-align: right;
  }

  .wallet-balance {
    background-image: url('../../../static/images/user/money.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px 10px;
  }
  .wallet-input {
    width: 80%;
    float: left;
    margin-left: 5%;
    height: 28px;
    line-height: 28px;
    border: 0px;
    color: #333333;
    font-size: 14px;
  }
  .wallet-btn {
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin-left: 10%;
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    background-color: #1ABC9C;
  }
</style>
